<template>
    <view class="page">
        <view class="page-header">
            <view class="search-input">
                <view class="input-btn" type="text" @click="skipsearch">查找政策与资讯</view>
                <view class="search-icon" >
                    <img :src="File_Url+'search-blue.png'" mode="widthFix" />
                </view>
                <view class="search-email" @click.stop="skipMessage">
                    <img :src="File_Url+'search-emails.png'" mode="widthFix" />
                    <view class="red-dot" v-if="messageShow==1" ></view>
                </view>
            </view>
            <banner-swiper :bannerList="bannerList" :bannerId.sync="bannerId"></banner-swiper>
<!--            <swiper class="rotation-chart" autoplay="true"-->
<!--                    interval="6000"-->
<!--                    duration="1000"-->
<!--                    @change="swiperChange"-->
<!--                    :current="bannerId"-->
<!--                    circular="true">-->
<!--                <swiper-item v-for="(item,index) in bannerList" :key="index" v-if="bannerList.length>0">-->
<!--                    <img :src="item.img_url" mode="aspectFill" @click="toActivity(item)">-->
<!--                </swiper-item>-->
<!--&lt;!&ndash;                <swiper-item>&ndash;&gt;-->
<!--&lt;!&ndash;                    <img src="/static/img/123.jpg" mode="aspectFill">&ndash;&gt;-->
<!--&lt;!&ndash;                </swiper-item>&ndash;&gt;-->
<!--            </swiper>-->
            <view class="dots">
                <view v-for="(item,index) in bannerList" :key="index" :class="{'dot':true,'active':bannerId==index}"></view>
            </view>
<!--            <view class="search-input">-->
<!--                <view class="input-btn" type="text" @click="skipsearch">搜索</view>-->
<!--                <icon class="search-icon" type="search" size="20"></icon>-->
<!--                <view class="search-email" @click.stop="skipMessage">-->
<!--                    <img :src="File_Url+'search-email.png'" mode="aspectFill" />-->
<!--                    <view class="red-dot" v-if="messageShow==1"></view>-->
<!--                </view>-->
<!--            </view>-->
        </view>
        <view class="page-nav">
            <view class="nav-item" v-for="(item,index) in sectionList" :key="index" @click="skipPage(item.link_url,item.level)">
                <view class="img">
                    <img :src="item.img_url" mode="aspectFit"/>
                </view>
                <text>{{item.name}}</text>
            </view>
<!--            <view class="nav-item" @click="skipNeeds">-->
<!--                <view class="img">-->
<!--                    <img :src="File_Url+'find-needs.png'" mode="aspectFit"/>-->
<!--                </view>-->
<!--                <text>找需求</text>-->
<!--            </view>-->
<!--            <view class="nav-item" @click="skipexpertLibrary">-->
<!--                <view class="img">-->
<!--                    <img :src="File_Url+'find-expert.png'" mode="aspectFit"/>-->
<!--                </view>-->
<!--                <text>找专家</text>-->
<!--            </view>-->
<!--            <view class="nav-item" @click="skipMemberUnit">-->
<!--                <view class="img">-->
<!--                    <img :src="File_Url+'vip-member.png'" mode="aspectFit"/>-->
<!--                </view>-->
<!--                <text>会员单位</text>-->
<!--            </view>-->
<!--            <view class="nav-item" @click="skipCompany">-->
<!--                <view class="img">-->
<!--                    <img :src="File_Url+'unit-entry.png'" mode="aspectFit"/>-->
<!--                </view>-->
<!--                <text>单位入驻</text>-->
<!--            </view>-->
        </view>
        <view class="advertisement" @click="intoAddNeeds">
            <img :src="'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/huikeshi/images/ad20200716.png'" mode="widthFix"/>
        </view>
<!--        <view class="page-needs">-->
<!--            <view class="needs-header-news" v-if="demandMessage.length>0">-->
<!--                <img :src="File_Url+'prompt.png'" />-->
<!--                <homeDynamic :demandMessage="demandMessage"></homeDynamic>-->
<!--            </view>-->
<!--            <view class="needs-header">-->
<!--                <text class="needs-header-title">服务对接</text>-->
<!--            </view>-->
<!--            <view class="null" v-if="needsList.length==0">-->
<!--                暂无对接服务~-->
<!--            </view>-->
<!--            <view class="needs-item" v-for="(item, index) in needsList" :key="index" @click="skipNeedsDetail(item.id)">-->
<!--                <view class="needs-item-top">-->
<!--                    <text class="item-title">{{item.title}}</text>-->
<!--                    <view class="item-city">-->
<!--                        <text>{{item.city.substring(0,item.city.length)}}</text>-->
<!--                        <img mode="widthFix" src="../../static/img/position.png" />-->
<!--                    </view>-->
<!--                    &lt;!&ndash;<text :class="{'item-status':true,'blue':item.status==0,'green':item.status==1}">{{item.status==0?'筛选中':'对接成功'}}</text>&ndash;&gt;-->
<!--                </view>-->
<!--                &lt;!&ndash;<view class="needs-item-bottom">-->
<!--                    <view class="item-btn-item item-btn-item-spec">-->
<!--                        <img class="spec-img" src="../../static/img/needs-type.png" />-->
<!--                        <text class="spec-text">{{item.classify_name}}</text>-->
<!--                    </view>-->
<!--                </view>&ndash;&gt;-->
<!--                <view v-if="item.budget" class="needs-item-bottom" style="margin-top: 15px;">-->
<!--                    <text style="color: #333333;font-size: 26rpx">服务预算：{{item.budget}}</text>-->
<!--                </view>-->
<!--                <view class="needs-item-center">-->
<!--                    <view class="item-content-text">{{item.content}}</view>-->
<!--                    <view class="item-content-tip" v-if="item.label_arr.length>0">-->
<!--                        <view v-for="(tip, ids) in item.label_arr" :key="ids">{{tip}}</view>-->
<!--                    </view>-->
<!--&lt;!&ndash;                    <view class="item-content-img" v-if="item.img_array_url.length>0">&ndash;&gt;-->
<!--&lt;!&ndash;                        <img v-for="(url, ids) in item.img_array_url" :key="ids" :src="url" mode="aspectFill"/>&ndash;&gt;-->
<!--&lt;!&ndash;                    </view>&ndash;&gt;-->
<!--                </view>-->
<!--                <view class="needs-item-bottom">-->
<!--                    <view class="item-btn-item">-->
<!--                        <img :src="File_Url+'eyes-icon.png'" />-->
<!--                        <text>{{item.browse_num}}</text>-->
<!--                    </view>-->
<!--                    <view class="item-btn-item">-->
<!--                        <img :src="File_Url+'collect-active.png'" v-if="item.is_collection==1"/>-->
<!--                        <img :src="File_Url+'collect.png'" v-else/>-->
<!--                        <text>{{item.attention_num}}</text>-->
<!--                    </view>-->
<!--                    <view class="item-time">{{item.created_at.split(' ')[0]}}</view>-->
<!--                </view>-->
<!--            </view>-->
            <!--<view class="needs-more" @click="skipNeeds" v-if="needsList.length>0">
                <text>更多服务</text>
                <img :src="File_Url+'right-grey.png'" />
            </view>-->
<!--        </view>-->
<!--        <view class="null" v-if="userInfo&&(userInfo.user_info.personal_auth_status==1||userInfo.user_info.is_expert_auth==1)">-->
<!--            <text v-if="needsTotal == needsList.length && !showLoading">没有更多了哦～</text>-->
<!--            <text v-if="needsTotal != needsList.length && !showLoading">上拉加载更多～</text>-->
<!--            <load-more :loading="true" :tip="'加载中'" v-if="showLoading"></load-more>-->
<!--        </view>-->


<!--        <view class="action-msg" v-if="!userInfo">-->
<!--            <span @click="toLogin" class="btn-go">登录</span><span class="last-msg">后发现更多商机～</span>-->
<!--            &lt;!&ndash;<button open-type="getUserInfo" @getuserinfo="bindGetUserInfo">注册登录</button>&ndash;&gt;-->
<!--        </view>-->
<!--        <view class="action-msg" v-if="userInfo&&(userInfo.user_info.personal_auth_status != 1 && userInfo.user_info.is_expert_auth != 1)">-->
<!--            <span @click="toAuth" class="btn-go" v-if="userInfo.user_info.personal_auth_status == -1 || userInfo.user_info.personal_auth_status == 2">认证</span>-->
<!--            <span class="last-msg" v-if="userInfo.user_info.personal_auth_status == -1 || userInfo.user_info.personal_auth_status == 2">后获得更多商机～</span>-->
<!--            <span @click="moreDemand" class="btn-go" v-if="userInfo.user_info.personal_auth_status == 0">点击查看</span>-->
<!--            <span class="last-msg" v-if="userInfo.user_info.personal_auth_status == 0">更多商机～</span>-->
<!--        </view>-->
        <view class="page-news">
            <view class="news-header">
                <text class="news-header-title">宣传栏</text>
            </view>
            <view class="null" v-if="newsList.length==0&&activityList.length==0">
                暂无资讯~
            </view>
            <view class="news-item-a" v-for="(item,index) in newsList" :key="index" @click="skipNewsDetail(item.id)">
                <view class="news-item-left">
                    <view class="item-content-text">
                        {{item.title}}
                    </view>
                    <view class="item-content-tip">
                        <view v-for="(ite,inde) in item.lable_array" :key="inde">{{ite}}</view>
                    </view>
                    <view class="item-content-time">
                        {{item.created_at.split(' ')[0]}}
                    </view>
                </view>
                <view class="news-item-right">
                    <img :src="item.img_url" mode="aspectFill" />
                </view>
            </view>
            <view class="news-item-b" v-for="(item, index) in activityList" :key="index" @click="skipActivityDetail(item.id)">
                <view class="news-item-top">
                    <img :src="item.img_url" mode="aspectFill"/>
                    <img class="icon" v-if="item.active_party_Info.type==1" :src="File_Url+'official-activity.png'" />
                </view>
                <view class="news-item-bottom">
                    <view class="news-content-text">
                        {{item.name}}
                    </view>
                    <view class="news-content-time">{{item.created_at.split(' ')[0]}}</view>
                </view>
            </view>
            <view class="news-more" @click="skipNews" v-if="activityList.length>0||newsList.length>0">
                <text>更多资讯</text>
                <img :src="File_Url+'right-grey.png'" />
            </view>
        </view>
    </view>
</template>

<script>
    import homeDynamic from "../components/homeDynamic/homeDynamic";
    import BannerSwiper from "../components/bannerSwiper/bannerSwiper";
    import loadMore from "../components/loadMore/loadMore";
    export default {
        name: "home",
        components: {BannerSwiper, homeDynamic,loadMore},
        data(){
            return{
                bannerId: 0,
                File_Url: this.$api.FILE_URL,
                bannerList:[],
                demandMessage: [],
                newsList: [],
                activityList:[],
                needsList: [],
                time: '',
                message: '',
                messageShow: '',
                sectionList: [],
                userInfo: '',
                demandPage : 1,
                needsTotal: 0,
                bottomLoadingShow: false,
                showLoading: true
            }
        },
        onShareAppMessage(){
            return {
                title: '初心领航会客室',
                path: '/pages/home/home'
            }
        },
        onShow(){
            /*this.demandPage = 1;*/
            this.getBannerList();
            this.getDemandIndex();
            this.getNewsList();
            this.getActivity();
            /*this.getDemandList();*/
            this.getSectionClassify();
            this.getUserInfos();
            // setInterval()
            this.time = setInterval(this.getDemandIndex,300000);
            // if (uni.getStorageSync('userToken')){
            this.getMyMessageRemind();
            this.message = setInterval(this.getMyMessageRemind,10000);
            // }

        },
        onLoad() {
          this.getDemandList();
        },
        onHide(){
            clearInterval(this.time);
            clearInterval(this.message);
        },
        //下拉刷新
        onPullDownRefresh(){
            this.demandPage = 1;
            this.getBannerList();
            this.getDemandIndex();
            this.getNewsList();
            this.getActivity();
            this.getDemandList();
            this.getSectionClassify();
            // setInterval()
            this.time = setInterval(this.getDemandIndex,300000);
            if (uni.getStorageSync('userToken')){
                this.getMyMessageRemind();
                this.message = setInterval(this.getMyMessageRemind,60000);
            }
            setTimeout(function () {
                uni.stopPullDownRefresh();
            },2000)
        },
        //触底叠加
        onReachBottom(){
            if(this.needsTotal != this.needsList.length){
                this.demandPage++;
                this.getDemandList();
            }
        },
        methods:{
            async moreDemand(){
                let userToken=uni.getStorageSync('userToken');
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.userInfo=res.data.data;
                    if(res.data.data.user_info.personal_auth_status == 0){
                        uni.showToast({
                            title:'认证审核中，审核通过后即可获取更多商机',
                            icon:'none'
                        })
                    }else {
                        this.getDemandList()
                    }
                    uni.setStorageSync('is_personal_auth',res.data.data.user_info.personal_auth_status);
                }
            },
            //跳转登录页面
            toLogin(){
                uni.switchTab({
                    url: '/pages/person/person'
                })
            },
            //跳转个人认证页面
            toAuth(){
                uni.navigateTo({
                    url:'/pages/Authentication/personAuth/personAuth'
                })
            },
            //消息提醒
            async getMyMessageRemind(){
                const res = await this.$api.getMyMessageRemind({user_token: uni.getStorageSync('userToken')});
                if (res.data.level == 'success'){
                    this.messageShow = res.data.data
                }
            },
            //获取轮播图列表
            async getBannerList(){
                const res = await this.$api.getBannerList();
                if (res.data.level == 'success'){
                    if (res.data.data.length>0){
                        this.bannerList = res.data.data;
                    }
                }
            },
			toActivity(val){
				//banner跳转
				let url=val.link_url;
				url=decodeURIComponent(url)
				let pattern=/^\/pages/;

				if(pattern.exec(url)){
				  uni.navigateTo({
				  	url:url
				  })
				}else{
					//跳转webview
				  // uni.navigateTo({url:'/pages/index/webview/webview?url='+url})
				}
			},
            //获取首页栏目
            async getSectionClassify(){
                let params = { type:'section' };
                const res = await this.$api.getClassify(params);
                if (res.data.level == 'success'){
                    this.sectionList = res.data.data
                    // console.log(res)
                    // this.navList = res.data.data
                }
            },
            //首页获取对接动态
            async getDemandIndex(){
                this.demandMessage = [];
                const res = await this.$api.getDemandIndex();
                if (res.data.level == 'success'){
                    this.demandMessage = []
                    for (let i=0;i<res.data.data.length; i++){
                        let str = '';
                        let width = getApp().globalData.width - Math.ceil(getApp().globalData.width/750*110);
                        let font = Math.ceil(getApp().globalData.width/750*28);
                        let length = Math.floor(width/font);
                        if (res.data.data[i].status == 1){
                            str = '恭喜'+res.data.data[i].unit_name+res.data.data[i].status_name+res.data.data[i].demand_name;
                        } else {
                            str = res.data.data[i].unit_name+res.data.data[i].status_name+res.data.data[i].demand_name;
                        }

                        let num = Math.ceil(str.length/length);
                        let srt = [];
                        for (let n = 0;n<num;n++){
                            if (n==(num-1)){
                                srt[n] = str.substr(n*length)
                            } else {
                                srt[n] = str.substr(n*length,length)
                            }
                        }
                        this.demandMessage.push(srt)
                    }
                }
            },
            //获取资讯列表
            async getNewsList(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    limit: 3,
                    page: 1,
                }
                const res = await this.$api.getNewsList(params);
                if (res.data.level == 'success'){
                    this.newsList = res.data.data
                }
            },
            //获取需求列表
            async getDemandList(){
                this.showLoading = true;
                let params = {
                    page: this.demandPage,
                    limit: 10,
                    user_token: uni.getStorageSync('userToken'),
                }
                const res = await this.$api.getDemandList(params);
                if (res.data.level == 'success'){
                    if (this.demandPage == 1){
                        this.needsList = res.data.data;
                    } else {
                        if(res.data.data.length == 0){
                            this.demandPage--;
                        } else{
                            this.needsList = this.needsList.concat(res.data.data)
                        }
                    }
                    this.needsTotal = res.data.page_info.total;
                    this.showLoading = false;
                }
            },
            //获取活动列表
            async getActivity(){
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    limit: 3,
                    page: 1
                }
                const res = await this.$api.getActivity(params);
                if (res.data.level == 'success'){
                    this.activityList = res.data.data
                }
            },
            //轮播图
            swiperChange(e){
                // console.log(e)
                this.bannerId = e.target.current
            },
            //跳转消息列表
            skipMessage(){
                uni.navigateTo({
                    url:'/pages/message/message'
                })
            },
            //跳转搜索页面
            skipsearch(){
                uni.navigateTo({
                    url:'/pages/search/search'
                })
            },
            //跳转页面
            skipPage(url, level){
				// console.log(level)
				// uni.navigateTo({
				//     url:"../duty_info/duty_info"
				// })
                switch (level) {
                    case '1':
                        uni.switchTab({
                            url:url
                        })
                        break;
                    case '2':
                        uni.navigateTo({
                            url:url
                        })
                        break;
                    case '3':
                        if (uni.getStorageSync('userToken')){

							uni.navigateTo({
							     url:url
							 })

                        } else{
                            uni.showToast({
                                icon: 'none',
                                title: '请先登录！',
                                duration: 2000
                            })
                            setTimeout(function () {
                                uni.switchTab({
                                    url: '/pages/person/person'
                                })
                            },1000)
                        }
                        break;
                    default:


                }

			},
            //跳转需求详情页面
            skipNeedsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/needsDetail/needsDetail?needsId='+id
                })
            },
            //跳转需求页面
            skipNeeds(){
                uni.switchTab({
                    url:'/pages/needs/needs'
                })
            },
            //跳转资讯页面
            skipNews(){
                uni.switchTab({
                    url:'/pages/news/news'
                })
            },
            //跳转资讯详情页面
            skipNewsDetail(id){
                uni.navigateTo({
                    url:'/pages/details/newsDetail/newsDetail?newsId='+id
                })
            },
            //跳转活动详情页面
            skipActivityDetail(id){
                uni.navigateTo({
                    url:'/pages/details/activityDetail/activityDetail?activityId='+id
                })
            },
            //跳转专家库
            skipexpertLibrary(){
                uni.navigateTo({
                    url:'/pages/expertLibrary/expertLibrary'
                })
            },
            //跳转会员单位
            skipMemberUnit(){
                uni.navigateTo({
                    url:'/pages/memberUnit/memberUnit'
                })
            },
            //跳转单位入驻
            skipCompany(){
                if (uni.getStorageSync('userToken')){
                    if (uni.getStorageSync('is_Vip') != 1){
                        uni.navigateTo({
                            url:'/pages/myCompany/myCompany'
                        })
                    } else {
                        uni.showToast({
                            icon:'none',
                            title: "您所在的单位已是会员单位！",
                            duration: 1500
                        })
                    }
                } else {
                    uni.showToast({
                        icon:'none',
                        title: "请先登录！",
                        duration: 1500
                    })
                }
            },
            intoAddNeeds() {
                if (uni.getStorageSync('userToken')){
                    // if(this.userInfo.user_info.is_info_perfect != 1){
                    //     uni.showToast({
                    //         icon: 'none',
                    //         title: '请完善个人信息！',
                    //         duration: 2000
                    //     })
                    //     setTimeout(function () {
                    //         uni.navigateTo({
                    //             url: '/pages/person/editInfo/editInfo'
                    //         })
                    //     },2000)
                    // } else{
                    //     uni.navigateTo({
                    //         url: '/pages/needs/addNeeds/addNeeds'
                    //     })
                    // }
                    uni.navigateTo({
                        url: '/pages/needs/addNeeds/addNeeds'
                    })

                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '请先登录！',
                        duration: 3000
                    })
                    setTimeout(function () {
                        uni.switchTab({
                            url: '/pages/person/person'
                        })
                    },3000)
                }
            },
            //获取个人信息
            async getUserInfos(){
                let userToken=uni.getStorageSync('userToken');
                const res=await this.$api.getUserInfos({user_token:userToken});
                if(res.data.level=='success'){
                    this.userInfo=res.data.data;
                    uni.setStorageSync('is_Vip',res.data.data.user_info.is_member_unit);//判断是否单位入驻
                    uni.setStorageSync('is_unit_auth',res.data.data.user_info.unit_auth_status);
                    uni.setStorageSync('is_personal_auth',res.data.data.user_info.personal_auth_status);
                }
            },

            intoLogin() {
                uni.switchTab({
                    url: '/pages/person/person'
                })
            }
        },

    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page-header{
        width: 100vw;
        /*height: 430rpx;*/
        -webkit-border-radius: 0 0 100% 100%/15%;
        border-radius:0 0 100% 100%/15%;
        -moz-border-radius: 0 0 100% 100%/15%;
        -ms-border-radius: 0 0 100% 100%/15%;
        -o-border-radius: 0 0 100% 100%/15%;
        overflow: hidden;
        position: relative;
        .rotation-chart{
            width: 100vw;
            height: 430rpx;
        }
        .search-input{
            /*position: absolute;*/
            /*z-index: 9999;*/
            /*top: 0;*/
            /*left: 0;*/
            padding: 10rpx 30rpx;
            width: calc(100vw - 60rpx);
            @include flex(left);
            flex-direction: row;
            .input-btn{
                width: calc(100% - 96rpx);
                height: 40rpx;
                border-radius: 30rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                padding: 10rpx 10rpx 10rpx 70rpx;
                margin-right: 32rpx;
                color: #CECECE;
                /*border: 2rpx solid rgba(219, 219, 219, 0.5);*/
            }
            .search-icon{
                position: absolute;
                top: 23rpx;
                left: 50rpx;
                width: 40rpx;
            }
            .search-email{
                position: relative;
                width: 50rpx;
                /*height: 40rpx;*/
                border-radius: 360rpx;
                padding: 14rpx;
                /*background: rgba(0, 0, 0, 0.1);*/
                .red-dot{
                    position: absolute;
                    top: 4rpx;
                    left: 4rpx;
                    width: 20rpx;
                    height: 20rpx;
                    background: rgba(255, 0, 0, 0.6);
                    border-radius: 360rpx;
                }
            }
        }
        .dots{
            position: absolute;
            right: 0;
            bottom: 60rpx;
            left: 0;
            @include flex();
            flex-direction: row;
            /*未选中时的小圆点样式 */
            .dot{
                width: 16rpx;
                height: 16rpx;
                margin: 0 10rpx;
                border-radius: 360rpx;
                background-color: rgba(255,255,255,0.3);
            }
            /*选中以后的小圆点样式  */
            .active{
                background-color: white;
            }
        }
    }
    .page-nav{
        width: calc(100vw - 100rpx);
        /*min-height: 160rpx;*/
        box-shadow: 0rpx 8rpx 20rpx 0 rgba(55, 130, 255, 0.2);
        margin: -40rpx 30rpx 0 30rpx;
        position: relative;
        z-index: 9999;
        border-radius: 12rpx;
        background: #ffffff;
        padding: 20rpx;
        @include flexWrap(flex-start);
        flex-direction: row;
        .nav-item{
            width: 25%;
            height: 100%;
            @include flex();
            flex-direction: column;
            padding: 20rpx 0;
            .img{
                width: 60rpx;
                height: 60rpx;
                padding: 10rpx;
                img{
                    border-radius: 360rpx;
                }
            }
            text{
                font-size: 24rpx;
                line-height: 33rpx;
                text-align: center;
            }
        }
    }
    .advertisement{
        width: calc(100vw - 70rpx);
        margin: 20px auto 0 auto
    }
    .page-needs{
        padding: 40rpx 0rpx 0 0rpx;
        border-bottom: 20rpx solid #F8F8F8;
        .needs-header-news{
            height: 40rpx;
            width: calc(100% - 60rpx);
            padding: 20rpx 30rpx;
            background: rgba(255, 237, 237, 1);
            @include flex(flex-start);
            flex-direction: row;
            img{
                width: 40rpx;
                height: 40rpx;
            }
            .rotation-text{
                width: 300rpx;
                height: 40rpx;
                text{
                    @include ellipsis(1);
                    width: 300rpx;
                    padding: 0 5rpx;
                    font-size: 28rpx;
                    line-height: 40rpx;
                    height: 40rpx;
                    color: rgba(255, 101, 101, 1);
                }
            }

        }
        .needs-header{
            height: 65rpx;
            padding: 10rpx 0 30rpx 30rpx;
            padding-bottom: 20rpx;
            .needs-header-title{
                font-size: 46rpx;
                font-weight: bold;
                line-height: 65rpx;
            }
        }
        .needs-item{
            padding: 20rpx 30rpx;
            border-bottom: 2rpx solid #E5E5E5;
            .needs-item-top{
                /*height: 57rpx;*/
                height: 63rpx;
                @include flex(flex-start);
                flex-wrap: wrap;
                flex-direction: row;
                .item-title{
                    /*height: 45rpx;*/
                    line-height: 45rpx;
                    font-size: 32rpx;
                    font-weight: bold;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .item-city{
                    text-align: right;
                    display: flex;
                    align-items: center;
                    flex-direction: row-reverse;
                    margin-top: 3px;
                    margin-left: auto;
                    text{
                        min-width: 30px;
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 14px;
                    }
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
                .item-status{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    width: 100%;
                    text-align: right;
                }
                .blue{
                    color: #3782FF;
                }
                .green{
                    color: #00C735;
                }
                .red{
                    color: #FF6565;
                }
            }
            .needs-item-center{
                padding: 10rpx 0rpx 16rpx 0;
                .item-content-text{
                    @include ellipsis(3);
                    font-size: 26rpx;
                    line-height: 37rpx;
                    margin-bottom: 16rpx;
                    margin-top: 10rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-img{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding: 20rpx 0;
                    img{
                        width: calc((100% - 36rpx)/3);
                        height: 140rpx;
                        margin: 6rpx;
                        border-radius: 4rpx;
                    }
                    img:last-child{
                        margin-right: 0;
                    }
                }
            }
            .needs-item-bottom{
                @include flex(flex-start);
                flex-direction: row;
                .item-btn-item{
                    @include flex();
                    flex-direction: row;
                    margin-right: 20rpx;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin-right: 10rpx;
                    }
                    text{
                        height: 40rpx;
                        line-height: 40rpx;
                        font-size: 28rpx;
                        color: #666666;
                    }
                    .spec-img{
                        width: 22rpx;
                        height: 22rpx;
                    }
                    .spec-text{
                        color: #333333;
                    }
                }
                .item-btn-item-spec{
                    padding: 4rpx 20rpx;
                    background-color: #f1f1f1;
                    border-radius: 20rpx;
                }
                .item-time{
                    margin-left: auto;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    color: #666666;
                }
            }
        }
        .needs-more{
            @include flex();
            flex-direction: row;
            height: 80rpx;
            text{
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #999999;
            }
            img{
                width: 40rpx;
                height: 40rpx;
                padding: 8rpx;
            }
        }
    }
    .loading-section{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        .sk-circle-fade{
            width: 20px;
            height: 20px;
        }
        img{
            width: 146px;
            height: 95px;
        }
    }
    .page-news{
        padding: 40rpx 0rpx 0 0rpx;
        .news-header{
            height: 65rpx;
            padding-left: 30rpx;
            padding-bottom: 10rpx;
            .news-header-title{
                font-size: 46rpx;
                font-weight: bold;
                line-height: 65rpx;
            }
        }
        .news-item-a{
            padding: 30rpx;
            @include flex(flex-start);
            flex-direction: row;
            border-bottom: 2rpx solid #E5E5E5;
            .news-item-left{
                width: calc(100% - 282rpx);
                height: 180rpx;
                .item-content-text{
                    @include ellipsis(2);
                    height: 84rpx;
                    line-height: 42rpx;
                    font-size: 30rpx;
                    margin-bottom: 16rpx;
                }
                .item-content-tip{
                    @include flex(flex-start);
                    padding-bottom: 16rpx;
                    flex-direction: row;
                    view{
                        height: 40rpx;
                        padding: 0 16rpx;
                        background: #3782FF;
                        border-radius: 8rpx;
                        font-size: 26rpx;
                        line-height: 40rpx;
                        margin-right: 10rpx;
                        color: #FFFFFF;
                    }
                }
                .item-content-time{
                    height: 28rpx;
                    line-height: 28rpx;
                    font-size: 24rpx;
                    color: #9B9B9B;
                }
            }
            .news-item-right{
                margin-left: auto;
                width: 260rpx;
                height: 180rpx;
                border-radius: 10rpx;
                overflow: hidden;
            }
        }
        .news-item-b{
            padding: 30rpx 30rpx 20rpx 30rpx;
            border-bottom: 2rpx solid #E5E5E5;
            .news-item-top{
                width: 100%;
                height: 360rpx;
                overflow: hidden;
                border-radius: 10rpx;
                position: relative;
                .icon{
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 120rpx;
                    width: 120rpx;
                }
            }
            .news-item-bottom{
                padding-top: 18rpx;
                .news-content-text{
                    width: 100%;
                    max-height: 84rpx;
                    line-height: 42rpx;
                    @include ellipsis(2);
                    margin-bottom: 10rpx;
                    font-size: 30rpx;
                }
                .news-content-time{
                    font-size: 24rpx;
                    height: 28rpx;
                    line-height: 28rpx;
                    color: #9B9B9B;
                }
            }
        }
        .news-more{
            @include flex();
            flex-direction: row;
            height: 80rpx;
            text{
                height: 40rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                color: #999999;
            }
            img{
                width: 40rpx;
                height: 40rpx;
                padding: 8rpx;
            }
        }
    }
    button{
        width: 200px;
        color: #ffffff;
        font-size: 12px;
        height: 30px;
        background:#169BD5;
        border-radius: 30px;
        line-height: 30px;
        border: none;
        margin-top: 3px;
    }
    button::after{
        border: none;
    }
    .action-msg{
        text-align: center;
        font-size: 30rpx;
        padding: 30rpx;

        .last-msg{
            color: #999a9a;
        }
        .btn-go{
            color: #169BD5;
            text-decoration: underline;
        }
    }
</style>
